<!doctype html>
<html lang="en">
<!--[if IE 9 ]>
<html  lang="en" class="ie9">
<![endif]-->
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>用户管理</title>
    <!-- CSS -->
    <link  rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/form.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/icons.css">
    <link rel="stylesheet" href="css/generics.css">
    <link rel="stylesheet" href="css/bstable/bootstrap-table.css">
    <link rel="stylesheet" href="css/bstable/bootstrap-table-self.css">
</head>
<body id="skin-blur-blue">
<header id="header" class="media">
    <a href="" id="menu-toggle"></a>
    <a class="logo pull-left" href="index.html">
        <img src="images/logo.png" alt="logo">
    </a>
    <div class="media-body">
        <div class="media" id="top-menu">
            <div class="pull-left tm-icon">
                <a data-drawer="messages" class="drawer-toggle" href="">
                    <i class="sa-top-message"></i>
                    <span>时间回溯</span>
                </a>
            </div>
            <div class="pull-left tm-icon">
                <a data-drawer="notifications" class="drawer-toggle" href="">
                    <i class="sa-top-updates"></i>
                    <span>帮助</span>
                </a>
            </div>
            <div id="time" class="pull-right">
                <span id="hours"></span>
                :
                <span id="min"></span>
                :
                <span id="sec"></span>
            </div>
            <div class="media-body">
                <input type="text" class="main-search">
            </div>
        </div>
    </div>
</header>
<div class="clearfix"></div>
<section id="main" class="p-relative" role="main">
    <!-- Sidebar -->
    <aside id="sidebar">
        <!-- Side Menu -->
        <ul class="list-unstyled side-menu">
            <li>
                <a class="sa-side-home" href="index.html">
                    <span class="menu-item">首页</span>
                </a>
            </li>
            <li>
                <a class="sa-side-typography" href="settingindex.html">
                    <span class="menu-item">系统管理</span>
                </a>
            </li>
            <li class="active">
                <a class="sa-side-widget" href="settingindex2.html">
                    <span class="menu-item">用户管理</span>
                </a>
            </li>
            <li>
                <a class="sa-side-table" href="settingindex3.html">
                    <span class="menu-item">产品配置与管理</span>
                </a>
            </li>
            <li>
                <a class="sa-side-form" href="settingindex4.html">
                    <span class="menu-item">常用工具管理</span>
                </a>
            </li>
        </ul>
    </aside>
    <!-- Content -->
    <section id="content" class="container">
        <!-- Messages Drawer时间回溯 -->
        <div id="messages" class="tile drawer animated">
            <div class="listview narrow">
                <div class="media">
                    <a href="">时间回溯</a>
                    <span class="drawer-close">&times;</span>
                </div>
                <div class="overflow" style="height: 254px">
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/1.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Nadin Jackson - 2 Hours ago</small><br>
                            <a class="t-overflow" href="">Mauris consectetur urna nec tempor adipiscing. Proin sit amet nisi ligula. Sed eu adipiscing lectus</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/2.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">David Villa - 5 Hours ago</small><br>
                            <a class="t-overflow" href="">Suspendisse in purus ut nibh placerat Cras pulvinar euismod nunc quis gravida. Suspendisse pharetra</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/3.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Harris worgon - On 15/12/2013</small><br>
                            <a class="t-overflow" href="">Maecenas venenatis enim condimentum ultrices fringilla. Nulla eget libero rhoncus, bibendum diam eleifend, vulputate mi. Fusce non nibh pulvinar, ornare turpis id</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/4.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Mitch Bradberry - On 14/12/2013</small><br>
                            <a class="t-overflow" href="">Phasellus interdum felis enim, eu bibendum ipsum tristique vitae. Phasellus feugiat massa orci, sed viverra felis aliquet quis. Curabitur vel blandit odio. Vestibulum sagittis quis sem sit amet tristique.</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/1.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Nadin Jackson - On 15/12/2013</small><br>
                            <a class="t-overflow" href="">Ipsum wintoo consectetur urna nec tempor adipiscing. Proin sit amet nisi ligula. Sed eu adipiscing lectus</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/2.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">David Villa - On 16/12/2013</small><br>
                            <a class="t-overflow" href="">Suspendisse in purus ut nibh placerat Cras pulvinar euismod nunc quis gravida. Suspendisse pharetra</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/3.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Harris worgon - On 17/12/2013</small><br>
                            <a class="t-overflow" href="">Maecenas venenatis enim condimentum ultrices fringilla. Nulla eget libero rhoncus, bibendum diam eleifend, vulputate mi. Fusce non nibh pulvinar, ornare turpis id</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/4.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Mitch Bradberry - On 18/12/2013</small><br>
                            <a class="t-overflow" href="">Phasellus interdum felis enim, eu bibendum ipsum tristique vitae. Phasellus feugiat massa orci, sed viverra felis aliquet quis. Curabitur vel blandit odio. Vestibulum sagittis quis sem sit amet tristique.</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/5.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Wendy Mitchell - On 19/12/2013</small><br>
                            <a class="t-overflow" href="">Integer a eros dapibus, vehicula quam accumsan, tincidunt purus</a>
                        </div>
                    </div>
                </div>
                <div class="media text-center whiter l-100">
                    <a href=""><small>VIEW ALL</small></a>
                </div>
            </div>
        </div>
        <!-- Notification Drawer帮助 -->
        <div id="notifications" class="tile drawer animated">
            <div class="listview narrow">
                <div class="media">
                    <a href="">帮助</a>
                    <span class="drawer-close">&times;</span>
                </div>
                <div class="overflow" style="height: 254px">
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/1.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Nadin Jackson - 2 Hours ago</small><br>
                            <a class="t-overflow" href="">Mauris consectetur urna nec tempor adipiscing. Proin sit amet nisi ligula. Sed eu adipiscing lectus</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/2.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">David Villa - 5 Hours ago</small><br>
                            <a class="t-overflow" href="">Suspendisse in purus ut nibh placerat Cras pulvinar euismod nunc quis gravida. Suspendisse pharetra</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/3.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Harris worgon - On 15/12/2013</small><br>
                            <a class="t-overflow" href="">Maecenas venenatis enim condimentum ultrices fringilla. Nulla eget libero rhoncus, bibendum diam eleifend, vulputate mi. Fusce non nibh pulvinar, ornare turpis id</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/4.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Mitch Bradberry - On 14/12/2013</small><br>
                            <a class="t-overflow" href="">Phasellus interdum felis enim, eu bibendum ipsum tristique vitae. Phasellus feugiat massa orci, sed viverra felis aliquet quis. Curabitur vel blandit odio. Vestibulum sagittis quis sem sit amet tristique.</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/1.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Nadin Jackson - On 15/12/2013</small><br>
                            <a class="t-overflow" href="">Ipsum wintoo consectetur urna nec tempor adipiscing. Proin sit amet nisi ligula. Sed eu adipiscing lectus</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/2.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">David Villa - On 16/12/2013</small><br>
                            <a class="t-overflow" href="">Suspendisse in purus ut nibh placerat Cras pulvinar euismod nunc quis gravida. Suspendisse pharetra</a>
                        </div>
                    </div>
                </div>
                <div class="media text-center whiter l-100">
                    <a href=""><small>VIEW ALL</small></a>
                </div>
            </div>
        </div>
        <!-- Breadcrumb -->
        <ol class="breadcrumb hidden-xs">
            <li><a href="settingindex4.html">常用工具管理</a></li>
            <li><a href="settingindex3.html">产品配置与管理</a></li>
            <li class="active">用户管理</li>
            <li><a href="settingindex.html">系统管理</a></li>
        </ol>
        <h4 class="page-title">用户管理页面</h4>
        <div class="block-area" id="tableStriped">
            <h3 class="block-title">账号管理</h3>
            <div class="table-responsive overflow">
                <div id="btnAddRemove">
                    <button class="btn btn-default" id="addtable4Row"  data-toggle="modal" data-target="#table-modal">
                        <span>新增</span>
                        <span class="glyphicon glyphicon-plus"></span>
                    </button>
                    <div class="modal fade in" id="table-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content" style="background: #000;">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        &times;
                                    </button>
                                    <h4 class="modal-title">
                                        增加行
                                    </h4>
                                </div>
                                <div class="modal-body">
                                    <div class="form-horizontal">
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                    </button>
                                    <button type="button" class="btn btn-primary footer-btn" data-dismiss="modal" id="btn-addtableRow">
                                        提交更改
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal fade in" id="changetableRow-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content" style="background: #000;">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        &times;
                                    </button>
                                    <h4 class="modal-title">
                                        更改行内容
                                    </h4>
                                </div>
                                <div class="modal-body">
                                    <div class="form-horizontal">
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                    </button>
                                    <button type="button" class="btn btn-primary footer-btn" data-dismiss="modal" id="btn-changetableRow">
                                        提交更改
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <table id="table4"
                       data-toggle="table"
                       data-url="json/sindex2.json"
                       data-toolbar="#btnAddRemove"
                       data-height="360"
                       data-pagination=true
                       data-show-columns=true
                >
                    <thead>
                    <tr>
                        <th data-field="name" data-sortable="true">用户</th>
                        <th data-field="enterTime" data-sortable="true">登录时间</th>
                        <th data-field="outTime" data-sortable="true">登出时间</th>
                        <th data-field="from" data-sortable="true" data-visible=0>来源</th>
                        <th data-field="doWhat" data-sortable="true">操作内容</th>
                        <th data-events="operateEvents" data-formatter="operateFormatter">操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </section>
    <!-- Older IE Message -->
    <!--[if lt IE 9]>
    <div class="ie-block">
        <h1 class="Ops">抱歉！</h1>
        <p>您正在使用一个过时的Internet Explorer版本，升级到以下任何Web浏览器，以便访问该网站的最大功能。 </p>
        <ul class="browsers">
            <li>
                <a href="http://www.google.cn/intl/zh-CN/chrome/browser/desktop/index.html">
                    <img src="img/browsers/chrome.png" alt="">
                    <div>Google Chrome</div>
                </a>
            </li>
            <li>
                <a href="http://www.firefox.com.cn/">
                    <img src="img/browsers/firefox.png" alt="">
                    <div>Mozilla Firefox</div>
                </a>
            </li>
            <li>
                <a href="http://www.oupeng.com/download">
                    <img src="img/browsers/opera.png" alt="">
                    <div>Opera</div>
                </a>
            </li>
            <li>
                <a href="https://www.apple.com/cn/safari/">
                    <img src="img/browsers/safari.png" alt="">
                    <div>Safari</div>
                </a>
            </li>
            <li>
                <a href="https://support.microsoft.com/zh-cn/help/17621/internet-explorer-downloads">
                    <img src="img/browsers/ie.png" alt="">
                    <div>Internet Explorer(New)</div>
                </a>
            </li>
        </ul>
        <p>升级你的浏览器更安全和更快的网络体验。 <br/>感谢你的支持...</p>
    </div>
    <![endif]-->
</section>
</body>
</html>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Bootstrap-table -->
<script src="js/bstable/bootstrap-table.js"></script>
<script src="js/bstable/bootstrap-table-zh-CN.js"></script>
<script src="js/functions.js"></script>
<script>
//    console.log(document.cookie);
//    console.log(document.cookie.split(";")[2]);
//    console.log(document.cookie.length);
console.log(document.cookie);


    var field = ["name","enterTime","outTime","from","doWhat"],
            titleText = ["用户","登录时间","登出时间","来源","操作内容"];
    function operateFormatter (value, row, index){
        return [
            '<img src="images/edit.png"/ class="cursor edit"/>' +
            '<img src="images/false.png" style="padding-left: 10%;" class="cursor imgDel remove"/>'
        ].join('');
    }
    window.operateEvents  = {
        'click .remove': function (e, value, row, index) {
            console.log(row.id);
            $("#table4").bootstrapTable('remove', {
                field: 'id',
                values: [row.id]
            });
        },
        'click .edit':function(row,$element){
            $("#table4").on('click-row.bs.table',function(row, $element){
//                console.log(row);
//                console.log($element);
                $("#changetableRow-modal>.modal-dialog>.modal-content>.modal-body>.form-horizontal").html("");

                var InputVal = [];
                for(var j=0;j<field.length;j++){
                    InputVal.push($element[field[j]])
                }
//                InputVal.push($element["name"]);
//                InputVal.push($element["enterTime"]);
//                InputVal.push($element["outTime"]);
//                InputVal.push($element["from"]);
//                InputVal.push($element["doWhat"]);
                var length = titleText.length;
                for(var i=0;i<length;i++){
                    var formGroup = $('<div class="form-group">'+
                            '<div class="col-md-9">'+
                            '<input type="text" class="form-control input-sm m-t-15 changetableRowInput" value="'+InputVal[i]+'" >'+
                            '</div>'+
                            '</div>');
                    var label = $('<lable class="col-md-2 control-label">'+
                            titleText[i]+
                            ':</lable>');
                    $(formGroup).prepend(label);
                    $("#changetableRow-modal>.modal-dialog>.modal-content>.modal-body>.form-horizontal").append(formGroup);
                }
                $('#changetableRow-modal').modal('show');

                $("#btn-changetableRow").click(function(){
                    var rowValue = {};
                    for(var i=0;i<$(".changetableRowInput").length;i++){
                        rowValue[field[i]] = $(".changetableRowInput").eq(i).val()
                    }
                    $("#table4").bootstrapTable("updateRow",{
                        index:$element.id,
                        row:rowValue
                    });
                });
            });
        }
    };


    /**************增加行******************************/
    $("#addtable4Row").click(function(){
        $("#table-modal>.modal-dialog>.modal-content>.modal-body>.form-horizontal").html("");
//        console.log($("#table4").bootstrapTable());
//        console.log($("#table4").bootstrapTable()[0].find(".th-inner"));

//        var length = $("#table4").bootstrapTable()[0].firstChild.firstChild.children.length;
        var length = titleText.length;
        for(var i=0;i<length;i++){
            var formGroup = $('<div class="form-group">'+
                    '<div class="col-md-9">'+
                    '<input type="text" class="form-control input-sm m-t-15 addtableRowInput">'+
                    '</div>'+
                    '</div>');
            var label = $('<lable class="col-md-2 control-label">'+
                    titleText[i]+
                    ':</lable>');
            $(formGroup).prepend(label);
            $("#table-modal>.modal-dialog>.modal-content>.modal-body>.form-horizontal").append(formGroup);
        }
    });
    $("#btn-addtableRow").click(function(){
        var rowVal = {};
        rowVal.id = $("#table4").bootstrapTable('getData').length;//id应该有bug没有考虑到用户删除的情况
        for(var i=0;i<$(".addtableRowInput").length;i++){
            rowVal[field[i]] = $(".addtableRowInput").eq(i).val();
        }
        $("#table4").bootstrapTable('insertRow', {
            index: 0,
            row:rowVal
        });
    });

























    function temptemp(){
        var field = ["name","did","vid","lid"],
                titleText = ["业务名称","网卡名","VLAN ID","MPLS LABLE"];
        function operateFormatter (value, row, index){
            return [
                '<img src="images/edit.png"/ class="cursor edit"/>' +
                '<img src="images/false.png" style="padding-left: 10%;" class="cursor imgDel remove"/>'
            ].join('');
        }
        window.operateEvents  = {
            'click .remove': function (e, value, row, index) {
//            console.log(row.id);
//            console.log(e);
//            console.log(value);
//            console.log(row);
//            console.log(index);
                $("#Confirm-modal").modal("show");
                $("#btn-ConfirmdelRow").click(function(){
                    $.ajax({
                        url:"watchpointController/getdelFind.do",
                        type:"post",
                        data:{
                            id:row.id
                        },
                        dataType:"json",
                        success:function(data){
                        }
                    });
                    $("#table4").bootstrapTable('remove', {
                        field: 'id',
                        values: [row.id]
                    });
                });

            },
            'click .edit':function(e, value, index,row){
//            console.log(e);
//            console.log(value);
//            console.log(row);
//            console.log(index);
//            var clickIndex = $(this).parent().parent().attr("data-index");

                $("#changetableRow-modal>.modal-dialog>.modal-content>.modal-body>.form-horizontal").html("");

                var InputVal = [];
                for(var j=0;j<field.length;j++){
                    InputVal.push(index[field[j]]);
                }
//                console.log(InputVal);
                var length = titleText.length;

                for(var i=0;i<length;i++){
                    switch (titleText[i]){
                        case "业务名称":
                            var formGroup = $('<div class="form-group">'+
                                    '<div class="col-md-8">'+
                                    '<input type="text" class="form-control input-sm m-t-15 addtableRowInput"  value="'+InputVal[i]+'">'+
                                    '</div>'+
                                    '</div>');
                            var label = $('<lable class="col-md-3 control-label">'+
                                    titleText[i]+
                                    ':</lable>');
                            $(formGroup).prepend(label);
                            $("#changetableRow-modal>.modal-dialog>.modal-content>.modal-body>.form-horizontal").append(formGroup);
                            break;
                        case "网卡名":
                            var wangName = ["eth0","lo"];
                            var select = $( '<select data-placeholder="请选择" class="tag-select-limited" multiple></select>');
                            for(var j=0;j<InputVal[i].split(",").length;j++){
                                select.append('<option value="" selected="selected">'+InputVal[i].split(",")[j]+'</option>');
                                for(var k=0;k<wangName.length;k++){
                                    if($.trim(InputVal[i].split(",")[j])== $.trim(wangName[k])){
                                        wangName.splice(k,1);
                                    }
                                }
                            }
                            if(wangName.length){
                                for(var j=0;j<wangName.length;j++){
                                    select.append('<option value="">'+wangName[j]+'</option>');
                                }
                            }
                            var formGroup = $('<div class="form-group"></div>').append($('<div class="col-md-8"></div>').append(select));
                            var label = $('<lable class="col-md-3 control-label">'+
                                    titleText[i]+
                                    ':</lable>');
                            $(formGroup).prepend(label);
                            $("#changetableRow-modal>.modal-dialog>.modal-content>.modal-body>.form-horizontal").append(formGroup);
                            break;
                        case "VLAN ID":
                            var vlanId = [1,2,3,4,5,6];
                            var select = $( '<select data-placeholder="请选择" class="tag-select-limited" multiple></select>');
                            for(var j=0;j<InputVal[i].split(",").length;j++){
                                select.append('<option value="" selected="selected">'+InputVal[i].split(",")[j]+'</option>');
                                for(var k=0;k<vlanId.length;k++){
                                    if($.trim(InputVal[i].split(",")[j])== $.trim(vlanId[k])){
                                        vlanId.splice(k,1);
                                    }
                                }
                            }
                            if(vlanId.length){
                                for(var j=0;j<vlanId.length;j++){
                                    select.append('<option value="">'+vlanId[j]+'</option>');
                                }
                            }
                            var formGroup = $('<div class="form-group"></div>').append($('<div class="col-md-8"></div>').append(select));
                            var label = $('<lable class="col-md-3 control-label">'+
                                    titleText[i]+
                                    ':</lable>');
                            $(formGroup).prepend(label);
                            $("#changetableRow-modal>.modal-dialog>.modal-content>.modal-body>.form-horizontal").append(formGroup);
                            break;
                        case "MPLS LABLE ID":
//                            console.log(InputVal[i].split(","));
                            var mpls = [4,5,6];
                            var select = $( '<select data-placeholder="请选择" class="tag-select-limited" multiple></select>');
                            for(var j=0;j<InputVal[i].split(",").length;j++){
                                select.append('<option value="" selected="selected">'+InputVal[i].split(",")[j]+'</option>');
                                for(var k=0;k<mpls.length;k++){
                                    if($.trim(InputVal[i].split(",")[j])== $.trim(mpls[k])){
                                        mpls.splice(k,1);
                                    }
                                }
                            }
                            if(mpls.length){
                                for(var j=0;j<mpls.length;j++){
                                    select.append('<option value="">'+mpls[j]+'</option>');
                                }
                            }
                            var formGroup = $('<div class="form-group"></div>').append($('<div class="col-md-8"></div>').append(select));
                            var label = $('<lable class="col-md-3 control-label">'+
                                    titleText[i]+
                                    ':</lable>');
                            $(formGroup).prepend(label);
                            $("#changetableRow-modal>.modal-dialog>.modal-content>.modal-body>.form-horizontal").append(formGroup);
                            break;
                    }
                }
                $(".tag-select-limited").chosen({
                    max_selected_options: 10
                });
                $('#changetableRow-modal').modal('show');
                $("#btn-changetableRow").click(function(){
//                console.log($("#changetableRow-modal .chzn-choices").eq(0).children(".search-choice").length);
                    var did = [],didStr = "",vid =[],lid=[];
                    for(var k=0;k<$("#changetableRow-modal .chzn-choices").eq(0).children(".search-choice").length;k++){
                        did.push($("#changetableRow-modal .chzn-choices").eq(0).children(".search-choice").eq(k).children("span").text());
                    }
                    if(did.length-1){
                        didStr = "1,2";
                    }else {
                        switch (did[0]){
                            case "eth0":
                                didStr ="1";
                                break;
                            case "lo":
                                didStr ="2";
                                break;
                        }
                    }
                    for(var k=0;k<$("#changetableRow-modal .chzn-choices").eq(1).children(".search-choice").length;k++){
                        vid.push($("#changetableRow-modal .chzn-choices").eq(1).children(".search-choice").eq(k).children("span").text());
                    }
                    for(var k=0;k<$("#changetableRow-modal .chzn-choices").eq(2).children(".search-choice").length;k++){
                        lid.push($("#changetableRow-modal .chzn-choices").eq(2).children(".search-choice").eq(k).children("span").text());
                    }


//                    console.log($("#changetableRow-modal .addtableRowInput").val().length);
//                    console.log(String(did).length);
//                    console.log(String(vid).length);
//                    console.log(String(lid).length);

                    if($("#changetableRow-modal .addtableRowInput").val().length>0
                            &&$("#changetableRow-modal .addtableRowInput").val().length<10
                            &&String(did).length
                            &&String(vid).length
                            &&String(lid).length
                    ){
                        $('#changetableRow-modal').modal('hide');
                        $.ajax({
                            url:"watchpointController/getUpdWatchpoint.do",
                            type:"post",
                            data:{
                                id:index.id,
                                "name":$("#changetableRow-modal .addtableRowInput").val(),
                                "did":didStr,
                                "vid":String(vid),
                                "lid":String(lid)
                            },
                            dataType:"json",
                            success:function(data){
//                            console.log(data);
                            }
                        });

                        $("#table4").bootstrapTable("updateRow",{
                            index:row,
                            row:{
                                id:index.id,
                                name:$("#changetableRow-modal .addtableRowInput").val(),
                                did:String(did),
                                vid:String(vid),
                                lid:String(lid)
                            }
                        });
                    }else {
                        alert("业务名称长度应该大于0小于10，‘网卡名’‘VLAN ID’‘MPLSLABLE ID’不能为空");
                    }
                });


//            $("#table4").on('click-row.bs.table',function(row, $element){
//
//            });
            }
        };


        /**************增加行******************************/
        $("#addtable4Row").click(function(){
            $("#addtableRow-modal>.modal-dialog>.modal-content>.modal-body>.form-horizontal").html("");
            var length = titleText.length;
            $.ajax({
                url:"watchpointController/getNetworkAll.do",
                type:"post",
                data:"",
                dataType:"json",
                success:function(data){
                    console.log(data);
                    for(var i=0;i<length;i++){
                        switch (titleText[i]){
                            case "业务名称":
                                var formGroup = $('<div class="form-group">'+
                                        '<div class="col-md-8">'+
                                        '<input type="text" class="form-control input-sm m-t-15 addtableRowInput">'+
                                        '</div>'+
                                        '</div>');
                                var label = $('<lable class="col-md-3 control-label">'+
                                        titleText[i]+
                                        ':</lable>');
                                $(formGroup).prepend(label);
                                $("#addtableRow-modal>.modal-dialog>.modal-content>.modal-body>.form-horizontal").append(formGroup);
                                break;
                            case "网卡名":
//                            var select = $( '<select data-placeholder="请选择" class="tag-select-limited" multiple></select>');

                                var formGroup = $('<div class="form-group">'+
                                        '<div class="col-md-8">'+
                                        '<select data-placeholder="请选择" class="tag-select-limited" multiple>'+
                                        '<option value="1">'+data[0]["1"]+'</option>'+
                                        '<option value="2">'+data[1]["2"]+ '</option>'+
                                        '</select>'+
                                        '</div>'+
                                        '</div>');
                                var label = $('<lable class="col-md-3 control-label">'+
                                        titleText[i]+
                                        ':</lable>');
                                $(formGroup).prepend(label);
                                $("#addtableRow-modal>.modal-dialog>.modal-content>.modal-body>.form-horizontal").append(formGroup);
                                break;
                            case "VLAN ID":
                                var formGroup = $('<div class="form-group">'+
                                        '<div class="col-md-8">'+
                                        '<select data-placeholder="请选择" class="tag-select-limited" multiple>'+
                                        '<option value="">'+data[2]["vid"].split(",")[0]+'</option>'+
                                        '<option value="">'+data[2]["vid"].split(",")[1]+ '</option>'+
                                        '<option value="">'+data[2]["vid"].split(",")[2]+ '</option>'+
                                        '<option value="">'+data[2]["vid"].split(",")[3]+ '</option>'+
                                        '<option value="">'+data[2]["vid"].split(",")[4]+ '</option>'+
                                        '</select>'+
                                        '</div>'+
                                        '</div>');
                                var label = $('<lable class="col-md-3 control-label">'+
                                        titleText[i]+
                                        ':</lable>');
                                $(formGroup).prepend(label);
                                $("#addtableRow-modal>.modal-dialog>.modal-content>.modal-body>.form-horizontal").append(formGroup);
                                break;
                            case "MPLS LABLE ID":
                                var formGroup = $('<div class="form-group">'+
                                        '<div class="col-md-8">'+
                                        '<select data-placeholder="请选择" class="tag-select-limited" multiple>'+
                                        '<option value="">'+data[2]["lid"].split(",")[0]+'</option>'+
                                        '<option value="">'+data[2]["lid"].split(",")[1]+ '</option>'+
                                        '<option value="">'+data[2]["lid"].split(",")[2]+ '</option>'+
                                        '</select>'+
                                        '</div>'+
                                        '</div>');
                                var label = $('<lable class="col-md-3 control-label">'+
                                        titleText[i]+
                                        ':</lable>');
                                $(formGroup).prepend(label);
                                $("#addtableRow-modal>.modal-dialog>.modal-content>.modal-body>.form-horizontal").append(formGroup);
                                break;
                        }
                    }
                    $(".tag-select-limited").chosen({
                        max_selected_options: 10
                    });
                    $("#addtableRow-modal").modal("show");
//                $("#btn-addtableRow").attr("disabled","disabled");
                }
            });
        });
        $("#btn-addtableRow").click(function(){
            var did = [],didStr = "",vid =[],lid=[];
            for(var k=0;k<$("#addtableRow-modal .chzn-choices").eq(0).children(".search-choice").length;k++){
                did.push($("#addtableRow-modal .chzn-choices").eq(0).children(".search-choice").eq(k).children("span").text());
            }
            if(did.length-1){
                didStr = "1,2";
            }else {
                switch (did[0]){
                    case "eth0":
                        didStr ="1";
                        break;
                    case "lo":
                        didStr ="2";
                        break;
                }
            }
            for(var k=0;k<$("#addtableRow-modal .chzn-choices").eq(1).children(".search-choice").length;k++){
                vid.push($("#addtableRow-modal .chzn-choices").eq(1).children(".search-choice").eq(k).children("span").text());
            }
            for(var k=0;k<$("#addtableRow-modal .chzn-choices").eq(2).children(".search-choice").length;k++){
                lid.push($("#addtableRow-modal .chzn-choices").eq(2).children(".search-choice").eq(k).children("span").text());
            }
//       console.log($(".addtableRowInput").val().length);
//       console.log(String(did).length);
//       console.log(String(vid).length);
//       console.log(String(lid).length);
            if($("#addtableRow-modal .addtableRowInput").val().length>0
                    &&$("#addtableRow-modal .addtableRowInput").val().length<10
                    &&String(did).length
                    &&String(vid).length
                    &&String(lid).length
            ){
                $("#addtableRow-modal").modal("hide");
                $.ajax({
                    url:"watchpointController/getAddWatchpoint.do",
                    type:"post",
                    data:{
                        "name":$("#addtableRow-modal .addtableRowInput").val(),
                        "did":didStr,
                        "vid":String(vid),
                        "lid":String(lid)
                    },
                    dataType:"json",
                    success:function(data){
//            console.log(data);
                        $("#table4").bootstrapTable('insertRow', {
                            index: 0,
                            row:{
                                name:$("#addtableRow-modal .addtableRowInput").val(),
                                did:String(did),
                                vid:String(vid),
                                lid:String(lid)
                            }
                        });
                    }
                });
            }else {
                alert("业务名称长度应该大于0小于10，‘网卡名’‘VLAN ID’‘MPLSLABLE ID’不能为空");
            }
        });
    }


















    function temp(){
        var field = ["name","enterTime","outTime","from","doWhat"];
        $("#deltable4Row").click(function(){
            var ids = $.map($("#table4").bootstrapTable('getSelections'), function (row) {
                return row.id;
            });
            $("#table4").bootstrapTable('remove', {
                field: 'id',
                values: ids
            });
        });
        $("#addtable4Row").click(function(){
            $("#table-modal>.modal-dialog>.modal-content>.modal-body>.form-horizontal").html("");
            var length = $("#table4").bootstrapTable()[0].firstChild.firstChild.children.length;
            for(var i=0;i<length-1;i++){
                var formGroup = $('<div class="form-group">'+
                        '<div class="col-md-9">'+
                        '<input type="text" class="form-control input-sm m-t-15 addtableRowInput">'+
                        '</div>'+
                        '</div>');
                var label = $('<lable class="col-md-2 control-label">'+
                        $("#table4").bootstrapTable()[0].firstChild.firstChild.children[i].innerText+
                        ':</lable>');
                $(formGroup).prepend(label);
                $("#table-modal>.modal-dialog>.modal-content>.modal-body>.form-horizontal").append(formGroup);
            }
        });
        $("#btn-addtableRow").click(function(){
            var rowVal = {};
            rowVal.id = $("#table4").bootstrapTable('getData').length;//id应该有bug没有考虑到用户删除的情况
            for(var i=0;i<$(".addtableRowInput").length;i++){
                rowVal[field[i]] = $(".addtableRowInput").eq(i).val();
            }
            $("#table4").bootstrapTable('insertRow', {
                index: 0,
                row:rowVal
            });
        });
    }

</script>
